<template>
  <div class="container">
    <div class="main">
      <el-row>
        <el-col :span="6">
          <ScreenModel
            :title="'总实时功率'"
            class="mh">
            <LineEcharts :options="options" />
          </ScreenModel>
          <ScreenModel
            :title="'今日发电量'"
            class="mt15 mh">
            <BarEcharts :options="options" />
          </ScreenModel>
          <ScreenModel
            :title="'累计发电量'"
            class="mt15 mh">
            <BarEcharts :options="options2" />
          </ScreenModel>
        </el-col>
        <el-col :span="12">
          <el-row justify="center">
            <el-col :span="8">
              <div class="flex-middle flex-center">
                <img
                  v-lazy="screenIcon1"
                  alt=""
                  class="screen-icon" />
                <div>
                  <div class="small c9 fn12">总装机容量</div>
                  <div class="fn16 c9"><span class="num">8726</span> MW</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex-middle flex-center">
                <img 
                  v-lazy="screenIcon2"
                  alt=""
                  class="screen-icon" />
                <div>
                  <div class="small c9 fn12">日发电量</div>
                  <div class="fn16 c9"><span class="num">8726</span> MWh</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex-middle flex-center">
                <img
                  v-lazy="screenIcon3"
                  alt=""
                  class="screen-icon" />
                <div>
                  <div class="small c9 fn12">累计发电量</div>
                  <div class="fn16 c9"><span class="num">8726</span> MWh</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <China
            id="china"
            :options="mapOptions" />
        </el-col>
        <el-col :span="6">
          <div class="flex-col-end">
            <ScreenModel
              :title="'总实时功率'"
              class="mh">
              <div class="screen_run flex-center-middle z100">
                <div class="mt_50">
                  <div class="fn28">13<span class="fn12">%</span></div>
                  <div class="mt8">功率占比</div>
                </div>
              </div>
              <div class="flex-between pb15 screen-content">
                <div>
                  <div>当前功率</div>
                  <div>0.101MW</div>
                </div>
                <div>
                  <div>组件总功率</div>
                  <div>2786KWP</div>
                </div>
              </div>
            </ScreenModel>
            <ScreenModel
              :title="'逆变器状态'"
              class="mt15 mh">
              <PieEcharts :options="pieOptions" />
            </ScreenModel>
            <ScreenModel
              :title="'社会贡献'"
              class="mt15 mh">
              <RB />
            </ScreenModel>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ScreenModel from '@/components/ScreenModel/index.vue'
import LineEcharts from '@/components/Echarts/line.vue'
import BarEcharts from '@/components/Echarts/bar.vue'
import China from '@/components/Echarts/china.vue'
import screenIcon1 from '@imgs/screen_icon1.png'
import screenIcon2 from '@imgs/screen_icon2.png'
import screenIcon3 from '@imgs/screen_icon3.png'
import PieEcharts from '@/components/Echarts/pie.vue'
import type { IMap } from '@/types/map'
import type { INV } from '@/types/echarts'
import RB from './rb.vue'
// import { useAnimateNumber } from '@/compoase/useAnimateNumber'
const options = {
  xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  yData: [820, 932, 901, 934, 1290, 1330, 1320],
  barColor: ['#7EB2FF', 'rgba(27,126,242,0)']
}
const options2 = {
  xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  yData: [820, 932, 901, 934, 1290, 1330, 1320],
  barColor: ['#29F1FA', 'rgba(27,126,242,0)']
}
const mapOptions: IMap[] = [
  { name: '郑州1', value: [113.65, 34.76], type: 'error' },
  { name: '郑州2', value: [115.65, 30.76], type: 'normal' }
]
const pieOptions: INV[] = [
  { name: '正常', value: 33 },
  { name: '等待', value: 7 },
  { name: '离线', value: 35 },
  { name: '故障', value: 25 }
]
</script>

<style lang="scss" scoped>
$bg: #0d142b;
$color: #ffffff;
$theme_color: #29f1fa;
.container {
  height: calc(100vh - 6.9rem);
  width: 100%;
  color: $color;
  background: url(@imgs/bg_screen@2x.png) center center no-repeat;
  // background-position: center center;
  background-size: cover;
  background-color: $bg;
  .main {
    min-width: 1200px;
    height: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    .mh {
      height: calc((100vh - 6.9rem - 3rem - 3rem) / 3);
    }
  }
}
.num {
  color: $theme_color;
  font-size: 2.4rem;
}
.screen-icon {
  width: 7.8rem;
}
#china {
  height: calc(100% - 7.8rem);
  // overflow: hidden;
}
.screen_run {
  padding-left: 5rem;
  padding-right: 5rem;
  box-sizing: border-box;
  position: relative;
  height: calc(100% - 9.1rem);
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(@imgs/screen_run.png) center center no-repeat;
    background-size: contain;
  }
}
.screen-content {
  padding-left: 5rem;
  padding-right: 5rem;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.87);
}
</style>
